<template>
	<div class="index">
		<div class="menu-box">
			<router-link class="menu-item" to="menu_1" v-if="isShowBtn('yinsk')">
				<img src="@/assets/images/img_06.png" alt="" class="icon" />
				<p class="txt">应收款</p>
			</router-link>
			<router-link class="menu-item" to="menu_2" v-if="isShowBtn('hkl')">
				<img src="@/assets/images/img_07.png" alt="" class="icon" />
				<p class="txt">回款率</p>
			</router-link>
			<router-link class="menu-item" to="menu_3" v-if="isShowBtn('yusk')">
				<img src="@/assets/images/img_08.png" alt="" class="icon" />
				<p class="txt">预收款</p>
			</router-link>
			<router-link class="menu-item" to="menu_4" v-if="isShowBtn('ywlbd')">
				<img src="@/assets/images/img_09.png" alt="" class="icon" />
				<p class="txt">业务量对比</p>
			</router-link>
			<router-link class="menu-item" to="menu_5" v-if="isShowBtn('khhjl')">
				<img src="@/assets/images/img_10.png" alt="" class="icon" />
				<p class="txt">客户含金量</p>
			</router-link>
			<router-link class="menu-item" to="menu_6" v-if="isShowBtn('zhxq')">
				<img src="@/assets/images/img_11.png" alt="" class="icon" />
				<p class="txt">账户详情</p>
			</router-link>
			<router-link class="menu-item" to="visitlogs1?type=edit" v-if="isShowBtn('bfrz')">
				<img src="@/assets/images/img_09.png" alt="" class="icon" />
				<p class="txt">拜访日志</p>
			</router-link>
			<router-link class="menu-item" to="visitlist" v-if="isShowBtn('bfck')">
				<img src="@/assets/images/img_09.png" alt="" class="icon" />
				<p class="txt">拜访查看</p>
			</router-link>
			<div class="menu-item" to="menu_4" v-if="isShowBtn('ywhz')">
				<img src="@/assets/images/img_09.png" alt="" class="icon" />
				<p class="txt">业务汇总</p>
			</div>
			<div class="menu-item" to="menu_4" v-if="isShowBtn('fwyy')">
				<img src="@/assets/images/img_09.png" alt="" class="icon" />
				<p class="txt">服务预约</p>
			</div>
			<div class="menu-item" to="menu_4" v-if="isShowBtn('wfpb')">
				<img src="@/assets/images/img_09.png" alt="" class="icon" />
				<p class="txt">外服排班</p>
			</div>
			<div class="menu-item" to="menu_4" v-if="isShowBtn('fwgd')">
				<img src="@/assets/images/img_09.png" alt="" class="icon" />
				<p class="txt">服务工单</p>
			</div>
		</div>
		<div class="echart-wrapper" v-if="isShowBtn('yysj')">
			<div class="title">
				<p class="name">营业数据</p>
				<div class="select-group">
					<div class="select" @click="showArea_m = true">
						{{ curArea_m.title }}
						<van-icon name="arrow-down" />
					</div>
					<div class="select" @click="show_m = true">
						{{ year_m }}年 {{ month_m }}月
						<van-icon name="arrow-down" />
					</div>
				</div>
			</div>
			<div class="echart-data">
				<div class="echart-data-item" @click="$router.push('/turnoverList')">
					<p class="label">基础营业额</p>
					<p class="num">￥{{ info.pay_info.jcyy_count }}</p>
				</div>
				<div class="echart-data-item" @click="$router.push('/turnoverList')">
					<p class="label">增值营业额</p>
					<p class="num">￥{{ info.pay_info.zzyy_count }}</p>
				</div>
			</div>
		</div>
		<div class="echart-wrapper" v-if="isShowBtn('hkltb')">
			<div class="title">
				<p class="name">回款率</p>
				<div class="select-group">
					<div class="select" @click="showArea = true">
						{{ curArea.title }}
						<van-icon name="arrow-down" />
					</div>
					<div class="select" @click="show = true">
						{{ year }}年 {{ month }}月 - {{ yearEnd }}年 {{ monthEnd }}月
						<van-icon name="arrow-down" />
					</div>
				</div>
			</div>
			<div class="echart-box" ref="chart"></div>
			<div class="echart-data" v-if="info.pay_info">
				<div class="echart-data-item">
					<p class="label">应收款</p>
					<p class="num">￥{{ info.pay_info.zong_count }}</p>
				</div>
				<div class="echart-data-item">
					<p class="label">已收款</p>
					<p class="num">￥{{ info.pay_info.real_pay_count }}</p>
				</div>
				<div class="echart-data-item">
					<p class="label">差价</p>
					<p class="num">￥{{ info.pay_info.diff_pay_count }}</p>
				</div>
				<div class="echart-data-item">
					<p class="label">未收款</p>
					<p class="num">￥{{ info.pay_info.no_pay_count }}</p>
				</div>
			</div>
		</div>
		<van-popup v-model="show_m" position="bottom">
			<van-datetime-picker v-model="currentDate_m" type="year-month" title="选择年月" :min-date="minDate" :max-date="maxDate" @cancel="show_m = false" @confirm="confirmTime_m" />
		</van-popup>
		<van-popup v-model="showArea_m" position="bottom">
			<van-picker title="选择区域" show-toolbar :columns="areaList" @confirm="onConfirmArea_m" @cancel="showArea = false">
				<template #option="option">
					{{ option.title }}
				</template>
			</van-picker>
		</van-popup>
		<van-popup v-model="show" position="bottom">
			<van-datetime-picker v-model="currentDate" type="year-month" title="选择开始年月" :min-date="minDate" :max-date="maxDate" @cancel="show = false" @confirm="confirmTime" />
		</van-popup>
		<van-popup v-model="showEnd" position="bottom">
			<van-datetime-picker v-model="currentDateEnd" type="year-month" title="选择结束年月" :min-date="currentDate" :max-date="maxDate" @cancel="showEnd = false" @confirm="confirmTimeEnd" />
		</van-popup>
		<van-popup v-model="showArea" position="bottom">
			<van-picker title="选择区域" show-toolbar :columns="areaList" @confirm="onConfirmArea" @cancel="showArea = false">
				<template #option="option">
					{{ option.title }}
				</template>
			</van-picker>
		</van-popup>
	</div>
</template>

<script>
	import * as echarts from "echarts";

	require("echarts/theme/macarons"); // echarts theme

	export default {
		name: "index",
		data() {
			return {
				info: {
					pay_info: {},
				},
				area_id: "",
				year_m: new Date().getMonth() == 0 ? new Date().getFullYear() - 1 : new Date().getFullYear(),
				month_m: new Date().getMonth() == 0 ? 12 : new Date().getMonth(),
				year: new Date().getMonth() == 0 ? new Date().getFullYear() - 1 : new Date().getFullYear(),
				month: new Date().getMonth() == 0 ? 12 : new Date().getMonth(),
				yearEnd: new Date().getMonth() == 0 ? new Date().getFullYear() - 1 : new Date().getFullYear(),
				monthEnd: new Date().getMonth() == 0 ? 12 : new Date().getMonth(),
				area_id_m: "",
				curArea: {
					id: "",
					title: "全部区域",
				},
				curArea_m: {
					id: "",
					title: "全部区域",
				},
				areaList: [
					{
						id: "",
						title: "全部区域",
					},
				],
				choosedata: [],
				show: false,
				show_m: false,
				currentDate: new Date(),
				currentDateEnd: new Date(),
				currentDate_m: new Date(),
				maxDate: new Date(),
				minDate: new Date(2020, 0, 1),
				showArea: false,
				showArea_m: false,
				myChart: null,
				showEnd: false,
			};
		},
		mounted() {
			this.getInfo();
			this.getArea();
		},
		computed: {
			isShowBtn() {
				return (str) => {
					return this.choosedata.length > 0 && this.choosedata.includes(str);
				};
			},
		},
		methods: {
			initEchart() {
				let echartData = this.info?.pay_info;
				if (echartData && this.isShowBtn("hkltb")) {
					// 基于准备好的dom，初始化echarts实例
					this.myChart = this.myChart ? this.myChart : echarts.init(this.$refs.chart);
					// 绘制图表
					let option = {
						series: [
							{
								name: "Access From",
								type: "pie",
								radius: "66%",
								data: [
									{
										value: echartData.diff_pay_count,
										name: "差价",
										itemStyle: {
											color: "#2ac35b",
										},
									},
									{
										value: echartData.no_pay_count,
										name: "未收款",
										itemStyle: {
											color: "#ffcf11",
										},
									},
									{
										value: echartData.real_pay_count,
										name: "已收款",
										itemStyle: {
											color: "#50b1c1",
										},
									},
								],
								label: {
									formatter: "{b}\n ￥{c}",
									overflow: "break",

									show: true,
									position: "outside",
								},
								emphasis: {
									itemStyle: {
										shadowBlur: 10,
										shadowOffsetX: 0,
										shadowColor: "rgba(0, 0, 0, 0.5)",
									},
								},
							},
						],
					};
					this.myChart.setOption(option);
				}
			},
			async getInfo() {
				const res = await this.$api.user_index({ area_id: this.area_id, year_m: this.year_m, month_m: this.month_m, area_id_m: this.area_id_m, date_interval: `${this.year}-${this.month}|${this.yearEnd}-${this.monthEnd}` });
				if (res.code == 1) {
					this.info = res.data;
					sessionStorage.setItem("userinfo", JSON.stringify(res.data));
					if (res.data?.choosedata) this.choosedata = res.data.choosedata.split(",");
					await this.$nextTick();
					this.initEchart();
				}
			},
			getArea() {
				this.$api.user_area().then((res) => {
					if (res.code == 1) {
						this.areaList.push(...res.data);
					}
				});
			},
			confirmTime(val) {
				this.show = false;
				this.showEnd = true;
				// this.year = new Date(val).getFullYear()
				// this.month = new Date(val).getMonth() + 1
				// this.getInfo()
			},
			confirmTimeEnd(val) {
				this.showEnd = false;
				this.year = new Date(this.currentDate).getFullYear();
				this.month = new Date(this.currentDate).getMonth() + 1;
				this.yearEnd = new Date(val).getFullYear();
				this.monthEnd = new Date(val).getMonth() + 1;
				this.getInfo();
			},
			onConfirmArea(val) {
				this.showArea = false;
				this.curArea = val;
				this.area_id = val.id;
				this.getInfo();
			},
			confirmTime_m(val) {
				this.show_m = false;
				this.year_m = new Date(val).getFullYear();
				this.month_m = new Date(val).getMonth() + 1;
				this.getInfo();
			},
			onConfirmArea_m(val) {
				this.showArea_m = false;
				this.curArea_m = val;
				this.area_id_m = val.id;
				this.getInfo();
			},
		},
	};
</script>

<style lang="scss" scoped>
	.index {
		min-height: 100vh;
		padding-bottom: 70px;

		.menu-box {
			padding: 0 0.4rem 0.67rem;
			background: #fff;
			margin-bottom: 0.21rem;
			display: flex;
			flex-wrap: wrap;

			.menu-item {
				width: 33.333%;
				display: flex;
				flex-direction: column;
				align-items: center;
				margin-top: 0.64rem;
				color: #000;

				.icon {
					width: 1.33rem;
					height: 1.33rem;
					margin-bottom: 0.24rem;
				}

				.txt {
					font-size: 14px;
					font-weight: bold;
				}
			}
		}

		.echart-wrapper {
			.title {
				padding: 0 0.4rem;
				height: 1.33rem;
				display: flex;
				align-items: center;
				justify-content: space-between;
				border-bottom: 1px solid #e0e0e0;
				background-color: #fff;

				p.name {
					font-size: 16px;
					font-weight: bold;
				}

				.select-group {
					display: flex;

					.select {
						font-size: 12px;
						margin-left: 0.67rem;

						van-icon {
						}
					}
				}
			}

			.echart-box {
				height: 8.27rem;
				padding: 0 0.4rem;
				background-color: #fff;
				border-bottom: 1px solid #e0e0e0;
			}

			.echart-data {
				padding: 0.88rem 0.4rem 0.21rem;
				background-color: #fff;
				display: flex;
				flex-wrap: wrap;

				.echart-data-item {
					width: 50%;
					margin-bottom: 0.75rem;
					font-size: 14px;

					p.label {
						margin-bottom: 0.21rem;
						text-align: center;
					}

					p.num {
						text-align: center;
					}
				}
			}
		}
	}
</style>
